<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../app/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <link href="../../app/bower_components/datatables.net-dt/css/jquery.dataTables.css" rel="stylesheet">
    <link rel="stylesheet" href="css/angular-datatables.css">

</head>
<body ng-controller="WithAjaxCtrl as showCase">
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>

<script src="../../app/bower_components/jquery/dist/jquery.js"></script>
<script src="../../app/bower_components/datatables.net/js/jquery.dataTables.js"></script>
<script src="../../app/bower_components/angular/angular.js"></script>
<script src="angular-datatables.js"></script>

<script>

    var app = angular.module('app', ['datatables']);

    app.controller('WithAjaxCtrl', WithAjaxCtrl);

    function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder) {
        var vm = this;
        vm.dtOptions = DTOptionsBuilder.fromSource('json/data.json')
                .withPaginationType('full_numbers');
        vm.dtColumns = [
            DTColumnBuilder.newColumn('id').withTitle('ID'),
            DTColumnBuilder.newColumn('firstName').withTitle('First name'),
            DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
        ];
    }
</script>

</body>
</html>